<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .show {
            display: block;
        }
        .hide{
            display: none;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>
        <input type="radio" v-model="flag" name="sex" id="nan" :value="true">男
        <input type="radio" v-model="flag" name="sex" id="nv" :value="false">女
    </p>
    <div id="sex">
        <div id="boy" :class="{show:flag,hide:!flag}">
            <ul>
                <li>打篮球</li>
                <li>打游戏</li>
                <li>抽烟</li>

            </ul>
        </div>
        <div id="girl" :class="{show:!flag,hide:flag}">
            <ul>
                <li>购物</li>
                <li>美食</li>
                <li>烫头</li>
            </ul>
        </div>
    </div>
</div>
<script>
    let app= new Vue({
       el:"#app",
       data:{
           flag:true
       }
    });

</script>
</body>
</html>